<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		a{
			color: #fff;
			text-decoration: none;
		}
		html,body{
			height: 100%;
			width: 100%;
		}
		body{
			background: url(login.jpg) no-repeat;
			background-size: 100% 100%;
		}
		main{
			width: 300px;
			height: 440px;
			background-color: rgba(99, 120, 146, .7);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			padding: 22px;
		}
		main h2{
			padding: 20px 0px;
			text-align: center;
			font-size: 25px;
			color: #fff;
			margin-bottom: 30px;
		}
		main input{
			width: 245px;
			height: 45px;
			background-color: rgba(55, 48, 48, 0.7);
			margin: auto;
			margin-bottom: 20px;
			margin-left: 5px;
			color: #fff;
		}
		#btn{
			width: 258px;
			height: 38px;
			margin: auto;
			margin-top: 10px;
			text-align: center;
			line-height: 38px;
			font-size: 20px;
			color: rgb(0,0,255);
		}
		a{
			width: 70px;
			height: 20px;
			display: block;
			float: right;
			font-size: 14px;
			margin-top: 5px;
		}
		#auto{
			width: 15px;
			height: 15px;
		}
	</style>
</head>
<body>
	<main>
		<h2>WECLOME</h2>
		<input type="text" placeholder="username" class="username"><br>
		<input type="password" placeholder="password" class="password" ><br>
		<input type="password" placeholder="repassword" class="repassword" ><br>
		<input type="checkbox" id="auto">七天内免登录
		<button id="btn">登录</button>
		<a href="register.html">注册账户</a>
	</main>

	<script src="jquery.min.js"></script>
	<script>
		$(function(){
			let username = localStorage.getItem("username");
			let password = localStorage.getItem("password");
			if (username && password) {
				$(".username").val(username);
				$(".password").val(password);
				$(".repassword").val(password);
				$("#btn").click();
			}
		})

		$("#btn").click(function(){
			let username = $(".username").val();
			let password = $(".password").val();
			let repassword = $(".repassword").val();
			if (password !== repassword) {
				alert("输入有误");
				return;
			}
			$.ajax({
				url:`http://10.35.164.241:81/login?username=${username}&password=${password}`,
				success:function(data){
					// console.log(data);
					if (data === "error" || data === "cuo") {
						alert("用户名或密码输入有误");
						return;
					}
					if($("#auto").prop("checked")){
						localStorage.setItem("username",username);
						localStorage.setItem("password",password);
					}
					if(data === "success"){
						location.href = "http://10.35.164.241/day25/index.html"
					}
				}
			})
		})
	</script>
</body>
</html>